<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery-1.8.0.min.js" ></script>
</head>
<body>
    <div>
        <div>
            <div>
                <label>文章排序方式:</label>
                <input type="radio" name="orderType" value="time" checked="checked" onchange="changeType(this)" >发布时间</input>
                <input type="radio" name="orderType" value="score" onchange="changeType(this)">分数</input>
            </div>
            <button type="button" onclick="$('#addDiv').show()">添加文章</button>
        </div>
        <div>
            <table>
                <thead>
                    <th>投票数</th>
                    <th>文章名称</th>
                    <th>文章作者</th>
                    <th>发布时间</th>
                </thead>
                <tbody id="artBody"></tbody>
            </table>
        </div>
        <div id="addDiv" style="display: none">
            <form id="myform">
                文章名称:<input type="text" name="artName" >
                文章作者:<input type="text" name="auther">
                <button type="button" onclick="add()">保存</button>
            </form>
        </div>
    </div>
</body>
<script type="text/javascript">
    var orderType = "time";
    $(function () {
        list(orderType);
    });

    function list(type) {
        $.ajax({
            url:'http://localhost:8080/article/list',
            type:'post',
            dataType:'json',
            data:{"type":type},
            success:function (data) {
                if (data.length > 0) {
                    var str = "";
                    for (var i = 0; i < data.length; i++) {
                        str += "<tr>";
                        str += "<td>"+data[i].votes+"</td>";
                        str += "<td>"+data[i].artName+"</td>";
                        str += "<td>"+data[i].auther+"</td>";
                        str += "<td>"+data[i].pubTime+"</td>";
                        str += "<td><button type='button' onclick='vote(\""+data[i].artId+"\")'>投票</button></td>"
                        str += "<td><button type='button' onclick='del(\""+data[i].artId+"\")'>删除</button></td>"
                        str += "</tr>";
                    }
                    $('#artBody').html(str);
                }
            }
        });
    }
    function add() {
        $.ajax({
            url:'http://localhost:8080/article/add',
            type:'post',
            data:$('#myform').serialize(),
            success:function (data) {
                $('#addDiv input').val('');
                $('#addDiv').hide();
                list(orderType);
            }
        });
    }

    function vote(artId){
        $.ajax({
            url:'http://localhost:8080/article/vote',
            type:'post',
            data:{"artId":artId},
            success:function (data) {
                alert(data);
                list(orderType);
            }
        });
    }

    function changeType(obj) {
        obj.checked;
        orderType = $('input:radio:checked').val();
        list(orderType);
    }

    function del(artId) {
        $.ajax({
            url:'http://localhost:8080/article/del',
            type:'post',
            data:{"artId":artId},
            success:function (data) {
                alert(data);
                list(orderType);
            }
        });
    }

</script>
</html>